<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { closeToast, showConfirmDialog, showLoadingToast, type ActionSheetAction } from 'vant'
import { request } from '@/api'
// 头像
const avatar = ref('')
// 昵称
const nickName = ref('')
// 简介
const intro = ref('万事如意!')
// 性别
const gender = ref('')
// 生日
const birthday = ref('')

onMounted(async () => {
  // 获取用户信息
  showLoadingToast({ message: '加载中...', duration: 0, forbidClick: true })
  const res = await request.get<GeekResponse<UserData>>('/v1_0/user/profile')
  avatar.value = res.data.data.photo
  nickName.value = res.data.data.name
  // 性别需要再次处理,如果返回的数据是0则男,是1则女
  gender.value = res.data.data.gender === '0' ? '男' : '女'
  birthday.value = res.data.data.birthday

  closeToast()
})
// 点击返回
const onClickLeft = () => {
  // TODO 这里应该调用鸿蒙端传入的返回功能
  geek.back()
}
const router = useRouter()
const gotoEditNickname = () => {
  // 跳转到编辑昵称页面
  router.push('/editName')
}

// 初始化 Dialog 的配置项
const showLogoutDialog = () => {
  showConfirmDialog({
    title: '温馨提示',
    message: '亲，您确定要退出吗？',
    confirmButtonText: '确认',
    confirmButtonColor: '#ff4d4f', // 红色
    cancelButtonText: '取消',
    cancelButtonColor: '#000000', // 黑色
  })
    .then(() => {
      geek.logout()
    })
    .catch(() => {
      console.log('用户点击了取消')
    })
}

const showAvatarSheet = ref(false)
const actions = [{ name: '拍照' }, { name: '本地选择' }]

const onSelect = async (action: ActionSheetAction, index: number) => {
  if (index === 0) {
    // 拍照上传
    const res = await geek.pickerCamera()
    // 上传图片
    await onUpdateAvatar(res)
  } else if (index === 1) {
    // 相册上传
    const res = await geek.pickerPhoto()
    // 上传图片
    await onUpdateAvatar(res)
  }
}

// 头像图片上传
const onUpdateAvatar = async (data: string) => {
  // try {
  //   // 显示加载提示
  //   showLoadingToast({ message: '上传中...', duration: 0, forbidClick: true })
  //   const img = b64toBlob(data, 'image/jpeg')
  //   const fd = new FormData()
  //   fd.append('file', img, Date.now() + '.jpeg')
  //   const res = await request.post<GeekResponse<{ avatar: string }>>('/member/profile/avatar', fd)
  //   // 获取用户数据
  //   const user = mk.queryUser()
  //   // 修改用户头像数据
  //   user.avatar = res.data.data.avatar
  //   // 更新页面上的头像
  //   profile.value.avatar = res.data.result.avatar
  //   // 更新用户数据
  //   mk.updateUser(user)
  //   showToast({ message: '上传成功' })
  // } catch (error) {
  //   showToast({ message: '上传失败' })
  //   console.log(error)
  // }
}
</script>

<template>
  <van-nav-bar title="个人信息" @click-left="onClickLeft">
    <template #left>
      <span class="custom-left-btn">
        <van-icon name="arrow-left" color="#909399" />
      </span>
    </template>
  </van-nav-bar>

  <van-cell title="头像" is-link @click="showAvatarSheet = true">
    <template #value>
      <img :src="avatar" alt="" />
    </template>
  </van-cell>
  <van-action-sheet
    v-model:show="showAvatarSheet"
    :actions="actions"
    cancel-text="取消"
    close-on-click-action
    @select="onSelect"
  />
  <van-cell title="昵称" is-link :value="nickName" @click="gotoEditNickname" />

  <van-space direction="vertical" fill :size="10" style="background: #efefef">
    <van-cell title="简介" is-link :value="intro" />

    <van-cell title="性别" is-link :value="gender" />
  </van-space>

  <van-cell title="生日" is-link :value="birthday" />

  <div class="logout" @click="showLogoutDialog">退出登录</div>
</template>

<style scoped>
img {
  width: 20px;
  height: 20px;
  border-radius: 10px;
}
.logout {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #ff4d4f;
  text-align: center;
  cursor: pointer;
}
</style>
